<template>
  <div class="app-container">
    <div class="operatingrisk">
      <dl class="operatingrisk-left xh-card">
        <dt class="xh-card-dt">
          <span class="title">测算记录</span>
        </dt>
        <dd class="xh-card-dd operatingrisk-left-dd">
          <ul class="operatingrisk-menu-list">
            <li v-for="(item, index) in menuList" :key="index" @click="handleClick(item)">
              <ListCard :id="activeId" :item="item" />
            </li>
          </ul>
          <div class="mores" @click="handleMore">查看全部测算</div>
        </dd>
      </dl>
      <div class="operatingrisk-right xh-card">
        <dt class="xh-card-dt">
          <span class="title">测算模型输出</span>
          <div>
            <el-button size="small" :disabled="!successData" :loading="downLoading" @click="handleDown">下载测算结果</el-button>
            <el-button size="small" type="primary" @click="handleCreate">开始新的测算</el-button>
          </div>
        </dt>
        <dd class="operatingrisk-right-dd" v-loading="loading">
          <section class="operatingrisk-right-card">
            <div class="operatingrisk-right-card-dt"></div>
            <div v-if="successData">
              <Results :data="successData" />
            </div>
          </section>
        </dd>
      </div>
    </div>
  </div>
</template>
<script>
import ListCard from "./components/ListCard.vue";
import { Results } from "./CreateOper/components/index";
import { getInfoSuccessData } from "./CreateOper/info";
import { downloadFile } from "@/utils/files";
export default {
  name: "Operatingrisk",

  components: {
    ListCard,
    Results
  },
  data() {
    return {
      listQuery: {
        page: 1,
        size: 10
      },
      menuList: [],
      activeId: undefined,
      successData: undefined,
      loading: false,
      downLoading:false
    };
  },
  watch: {},
  computed: {},
  created() {
    this.getList();
  },
  mounted() {},
  methods: {
    // 模拟接口
    list(listQuery) {
      return new Promise((resolve, reject) => {
        const arr = [];
        Array(listQuery.size)
          .fill(0)
          .forEach((_, index) => {
            const obj = {
              id: index + "" + Math.floor(Math.random() * 100),
              time: Date.now(),
              name: "项目" + index,
              status: Math.floor(Math.random() * 2),
              zzl: Math.floor(Math.random() * 100) / 100 + "%",
              ipr: Math.floor(Math.random() * 100) / 100 + "%",
              npv: Math.floor(Math.random() * 10000000),
              jthsq: Math.floor(Math.random() * 100) / 100,
              dthsq: Math.floor(Math.random() * 100) / 100
            };
            arr.push(obj);
          });
        resolve({
          data: arr
        });
      });
    },
    getList() {
      this.list(this.listQuery).then(res => {
        this.menuList = res.data;
        if (res.data && res.data.length > 0) {
          this.activeId = res.data[0].id;
          this.getInfo(this.activeId);
        }
      });
    },
    getInfo(id) {
      this.loading = true;
      this.successData=undefined
      getInfoSuccessData()
        .then(res => {
          this.successData = res.data;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleClick(item) {
      this.activeId = item.id;
      this.getInfo();
    },
    handleMore() {
      this.$router.push('/invest/operatingriskList')
    },
    handleCreate() {
      this.$router.push("/invest/createOper");
    },
    handleDown() {
      this.downLoading=true
      const fileContent = "Hello,你好!";
      const fileName = "测试.xlsx";

      const file = new File([fileContent], fileName);
      downloadFile(file, "测试");
      setTimeout(() => {
        this.$message.success('下载成功，请打开下载文件查看')
        this.downLoading=false
      }, 1500);
    }
  }
};
</script>
<style lang="scss" scoped>
.operatingrisk {
  padding: 0px;
  display: flex;
  height: 100%;
  overflow: hidden;
  &-left {
    width: 320px;
    height: 100%;

    &-dd {
      display: flex;

      flex-direction: column;
    }
    .mores {
      padding: 10px;
      font-size: 14px;
      color: #3a75ff;
      text-align: center;
      cursor: pointer;
      transition: all 0.5s;
      &:hover {
        opacity: 0.9;
        letter-spacing: 2px;
      }
    }
  }
  &-right {
    flex: 1;
    width: 0;
    margin-left: 20px;
  }
}
.operatingrisk-menu-list {
  flex: 1;
  overflow-y: auto;
  position: relative;
  height: 100%;
  margin-right: -10px;
  padding-right: 10px;

  padding: 5px 0px 0 0;
  &::-webkit-scrollbar-track-piece {
    background: #e8ecf1;
  }

  &::-webkit-scrollbar {
    width: 4px;
  }

  &::-webkit-scrollbar-thumb {
    background: #b8c6d8;
    border-radius: 20px;
  }

  li {
    list-style: none;
    margin-bottom: 20px;
    cursor: pointer;
  }
}
.operatingrisk-right-card {
  &-dt {
    display: flex;
    align-items: center;
    .title {
      flex: 1;
      font-size: 16px;
      color: #222;
      position: relative;
      padding-left: 15px;
      &::before {
        width: 4px;
        background-color: rgba(58, 117, 255, 1);
        height: 15px;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translate(0, -50%);
        content: "";
      }
    }
  }
}
.operatingrisk-right-dd{
  min-height: 500px;
}
</style>
